<template>
  <a-drawer
    v-model:visible="visible"
    width="500px"
    placement="left"
    unmount-on-close
    @cancel="close"
  >
    <template #title>
      <a-input v-model="config.label" style="width: 440px;" />
    </template>

    <a-tabs type="line" size="medium">
      <a-tab-pane key="1" title="审批设置">
        <config-assign v-model="config.assign" :form-id="formId" :cells-pre="cellRefuse" />
      </a-tab-pane>
      <a-tab-pane key="2" title="按钮配置">
        <config-operate v-model="config.operate" />
      </a-tab-pane>
      <a-tab-pane key="3" title="表单权限">
        <config-form-permission v-model="config.formPermission" :form-id="formId" />
      </a-tab-pane>
    </a-tabs>

    <template #footer>
      <a-button-group status="normal">
        <a-button @click.stop="close">
          <template #icon>
            <icon-close />
          </template>
          取消
        </a-button>
        <a-button type="primary" @click.stop="saveConfig">
          <template #icon>
            <icon-save />
          </template>
          确定
        </a-button>
      </a-button-group>
    </template>
  </a-drawer>
</template>

<script lang="ts" setup>
import { ref, defineExpose, defineEmits } from 'vue';
import { cloneDeep } from 'lodash';
import ConfigAssign from '@/components/bpmn-design/config/config-assign.vue';
import ConfigOperate from '@/components/bpmn-design/config/config-operate.vue';
import ConfigFormPermission from '@/components/bpmn-design/config/config-form-permission.vue';

const emits = defineEmits(['saveConfig']);

const config = ref({ type: Object });

const formId = ref<string>('');

const visible = ref(false);

const cellRefuse = ref([]);

const saveConfig = () => {
  emits('saveConfig', cloneDeep(config.value));
  close();
};

const open = (configData: any, processData: any, cells: []) => {
  visible.value = true;
  formId.value = processData.formId;
  config.value = configData;
  cellRefuse.value = cells;
};

const close = () => {
  visible.value = false;
};

defineExpose({
  open,
  close
});
</script>

<script lang="ts">
export default {
  name: 'NodeUserTaskDrawer'
};
</script>

<style scoped lang="less">

</style>